<template>
  <div style="font-size: 14px;">
    <div style="margin: 20px 200px;">
     <el-carousel indicator-position="outside" :loop="true" :autoplay="true" :interval="2000" height="500px">
     	  <el-carousel-item v-for="url in imgs" :key="url">
     		<el-image
     		   style="width: 100%;height: 100%;"
     		  :src="url"
     		  :fit="fit">
     		</el-image>
     	  </el-carousel-item>
       </el-carousel>
    </div>
    <div style="background-color: #eeeeee;color: gray;">
      <div style="margin: 0 200px;">
        <div style="height: 40px;line-height: 40px;font-weight: bold;font-size: 18px;">推荐商品</div>
        <div style="display: flex;margin-bottom: 20px;" v-for="i in 5">
          <div class="product" v-for="(item,index) in products" :style="'flex: 1;border: 1px solid #dfdfdf;'+(index>0?'margin-left: 20px;':'')">
            <div style="background-color: #FFFFFF;text-align: center;">
              <div style="margin: 0 20px;">
                <div>
                  <img :src="item.url">
                </div>
                <div style="font-size: 16px;font-weight: 500;height: 30px;overflow: hidden;text-overflow: ellipsis;">
                  {{item.name}}
                </div>
                <div style="font-size: 12px;height: 50px;overflow: hidden;text-overflow: ellipsis;">
                  {{item.des}}
                </div>
              </div>
            </div>
            <div style="height: 40px;line-height: 40px;display: flex;font-size: 12px;">
              <div style="flex:1;color: red;margin-left: 20px;border-right: 1px solid #d6d9e2;font-weight: 600;">¥1200 元</div>
              <div style="flex:1;display: flex;">
                <div style="flex: 1;"></div>
                <div style="display: flex;width: 100px;">
                  <img src="../../../public/img/car.png" style="width: 20px;height: 20px;margin-top: 10px;margin-right: 5px;">
                  <el-button type="text" style="color: gray;">加入购物车</el-button>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
      data() {
        return {
           imgs: [
             'https://www.wantongdiannao.com/upload/slide/2021/1008/11394929831.jpg',
             'https://www.wantongdiannao.com/upload/slide/2021/1008/11484115911.jpg',
             'https://img0.baidu.com/it/u=1039967575,1136002723&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=500',
           ],
           products: [
             {name:'荣耀笔记本MagicBook V 14',des:'超大容量，超级高清，超级速度',url:'https://www.wantongdiannao.com/upload/goods/1786/17180525093_175_175.jpg'},
             {name:'荣耀笔记本MagicBook V 14',des:'超大容量，超级高清，超级速度',url:'https://www.wantongdiannao.com/upload/goods/1796/09165363212_175_175.png'},
             {name:'荣耀笔记本MagicBook V 14',des:'超大容量，超级高清，超级速度',url:'https://www.wantongdiannao.com/upload/goods/1796/09165363212_175_175.png'},
             {name:'荣耀笔记本MagicBook V 14',des:'超大容量，超级高清，超级速度',url:'https://www.wantongdiannao.com/upload/goods/1747/14211244528_175_175.png'}
           ],
        };
      },
      methods: {
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
        },
        handleClick(tab, event) {
          console.log(tab, event);
        },
      }
    };
</script>

<style>
  .product:hover{
    cursor: pointer;
    transform: scale(1.05);
    border-top: 1px solid red!important;
  }
</style>
